/*!
 * Copyright 2014-2024 JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */

@import '../../ui-kit/_tokens/index';

$font-color: rgba(255, 255, 255, 0.96);
$secondary-font-color: rgba(255, 255, 255, 0.7);
$input-height-desktop: 39px;
$input-height-mobile: 51px;

#pages-search {
  width: 40px;
  height: 40px;
  padding: 0;

  cursor: pointer;

  border: none;
  border-radius: var(--size-s1);

  background: transparent;

  font-size: 0;

  &:focus-visible {
    outline: var(--focus-outline);
  }
}

@media (width < $breakpoint-desktop-min) {
  #pages-search {
    width: 52px;
    height: 52px;

    border-radius: 0;
    outline-offset: -4px;
  }
}

.search {
  &,
  [data-test='ring-select'],
  [data-test='ring-tooltip'],
  [data-test='ring-select_focus'] {
    display: inline-block;

    margin: 0;
    padding: 0;

    font-size: 0;
    line-height: 0;
  }
}

.search-hotkey-popup {
  padding: 4px;

  background-color: var(--background-color) !important;
}

span[data-test-custom='ring-select-popup-filter-icon'] {
  top: 10px;
  left: 11px;

  @media (width < $breakpoint-desktop-min) {
    top: 16px;
    left: 11px;
  }

  svg {
    width: 20px !important;
    height: 20px !important;
  }
}

.popup-wrapper {
  min-width: 636px !important;

  margin-top: -42px;

  color: $font-color;

  border: 1px solid hsla(0deg, 0%, 100%, 0.2) !important;

  background-color: #262628 !important;

  @media (width < $breakpoint-desktop-min) {
    top: -1px !important;
    right: -1px !important;
    bottom: -1px !important;
    left: -1px !important;

    overflow-y: hidden !important;

    margin-top: 0;
  }

  [class^='filterWrapper'] {
    margin-bottom: 4px;

    padding-right: 0;

    border-bottom: 1px solid hsla(0deg, 0%, 100%, 0.2);
  }

  input {
    --outline-width: 4px;

    width: calc(100% - var(--outline-width));
    height: $input-height-desktop;
    margin-left: -40px;

    padding-right: 52px;
    padding-left: 40px;

    color: #fff;

    border-radius: 0;

    font-size: 16px;

    font-weight: normal !important;

    &::placeholder {
      color: transparent;
    }

    @media (width < $breakpoint-desktop-min) {
      height: $input-height-mobile;
    }
  }

  span[data-test-custom='ring-select-popup-filter-icon'] {
    color: #fff;
  }

  div[data-test='ring-input'] {
    @media (width < $breakpoint-desktop-min) {
      overflow: hidden;
    }
  }

  button[data-test='ring-input-clear'] {
    top: 0;
    right: 40px;

    height: 39px;

    padding: 9px 12px;

    transition: none;

    color: #fff !important;

    border-radius: 0;

    line-height: 21px;

    @media (width < $breakpoint-desktop-min) {
      right: 52px;

      height: 52px;
    }

    &:focus-visible {
      box-shadow:
        inset 4px 0 0 var(--color-key-blue-50),
        inset -4px 0 0 var(--color-key-blue-50),
        0 -4px 0 var(--color-key-blue-50),
        0 4px 0 var(--color-key-blue-50);

      @media (width < $breakpoint-desktop-min) {
        outline: var(--focus-outline);
        outline-offset: -4px;
        box-shadow: none;
      }
    }

    &:hover {
      background-color: var(--color-w10);
    }

    @media (width < $breakpoint-desktop-min) {
      padding: 15.5px 12px;
    }

    span {
      display: none;
    }

    &::after {
      content: 'Clear';
    }
  }
}

@media screen and (width <= 759px) {
  .popup-wrapper {
    min-width: 100% !important;
  }

  .search-hotkey-popup {
    display: none;
  }
}

.search--close-button {
  position: absolute;
  top: -1px;
  right: -1px;

  width: 41px;
  height: 41px !important;

  border-radius: 0 !important;

  @media (width < $breakpoint-desktop-min) {
    width: 52px;
    height: 52px !important;

    background-color: transparent !important;

    &:hover {
      background-color: var(--color-w10) !important;
    }

    &:active {
      background-color: var(--color-w16) !important;
    }

    &:focus-visible {
      outline: var(--focus-outline);
      outline-offset: -4px;
    }
  }
}

.template-wrapper {
  display: flex;
  overflow: hidden;
  flex-direction: column;

  height: auto;
  padding: 4px 24px;
  grid-template-columns: auto auto;

  strong {
    color: $font-color;
    background: rgba(48, 127, 255, 0.3);
  }
}

.template-title {
  display: -webkit-box;
  overflow: hidden;

  white-space: normal;
  word-break: break-all;

  color: #fff;

  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.template-description {
  display: block;
  display: -webkit-box;
  overflow: hidden;

  white-space: normal;
  word-break: break-all;

  color: $secondary-font-color;

  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  justify-self: end;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media screen and (width <= 759px) {
  .template-wrapper {
    display: flex;
    flex-direction: column;

    height: auto;

    span {
      line-height: unset;
    }
  }

  .template-title {
    font-size: 14px;
    line-height: 20px;
  }

  .template-description {
    font-size: 14px;
    line-height: 20px;
  }
}

.template-name {
  justify-self: start;
}

/* remove fade at the bottom */
[class^='fade'] {
  display: none;
}

[class*='hover'] {
  background-color: hsla(0deg, 0%, 100%, 0.1) !important;
}

div[data-test='ring-select-popup-filter'] {
  padding-left: 40px;
}

div[data-test='ring-popup'] {
  overflow: visible;

  border-radius: 0;

  & .ReactVirtualized__List {
    max-height: 412px !important;

    &:focus-visible {
      outline: var(--focus-outline);
    }

    @media (width < $breakpoint-desktop-min) {
      max-height: calc(100vh - $input-height-mobile) !important;
    }
  }
}
